<template>
<div>
    <div class="subject" v-for="(item,index) in list" :key="index">
    <span>{{item.forword}}</span>
    <span>+</span>
    <span>{{item.back}}</span>
    <span>=</span>
    <input type="number" v-model.number="item.key"/>
    <button @click='btn(index)'>提交</button>
  </div>
</div>
</template>

<script>
export default {
 data () {
 return {
   }
 },
 props:{
    list:Array
 },
components: {},

 methods: {
 btn(index){
  this.$emit('add',this.list[index].key,index)
 }
 }
}
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>